<template>
  <view class="travel-detail">
    <!-- 顶部图片区域 -->
    <view class="header-image-container">
      <image :src="detail.image" mode="aspectFill" class="header-image" />
      <view class="header-overlay">
        <!-- 顶部导航按钮 -->
        <view class="nav-buttons">
          <view class="nav-button" @click="handleBack">
            <image src="/static/images/back-icon.png" mode="aspectFit" class="nav-icon" />
          </view>
        </view>
        <!-- 图片预览 -->
        <view class="image-preview">
          <view class="preview-dots">
            <image :src="detail.image" mode="aspectFill" class="preview-dot active" />
            <image v-if="detail.previewImages && detail.previewImages.length > 0" :src="detail.previewImages[0]" mode="aspectFill" class="preview-dot" />
            <text v-if="detail.previewImages && detail.previewImages.length > 1" class="preview-count">+{{ detail.previewImages.length - 1 }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content-container">
      <!-- 标题和价格 -->
      <view class="title-section">
        <view class="title-container">
          <text class="title">{{ detail.title || detail.name }}</text>
        </view>
        <view v-if="detail.price" class="price-container">
          <text class="price">{{ detail.price }}</text>
          <text class="price-unit">/person</text>
        </view>
      </view>

      <!-- 概览部分 -->
      <view class="overview-section">
        <text class="section-title">Overview</text>
        <view class="overview-items">
          <view class="overview-item">
            <image src="/static/images/duration-icon.png" mode="aspectFit" class="overview-icon" />
            <view class="overview-info">
              <text class="info-label">DURATION</text>
              <text class="info-value">{{ detail.duration || '5 Days' }}</text>
            </view>
          </view>
          <view class="overview-item">
            <image src="/static/images/location-icon.png" mode="aspectFit" class="overview-icon" />
            <view class="overview-info">
              <text class="info-label">LOCATION</text>
              <text class="info-value">{{ detail.location }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 描述部分 -->
      <view class="description-section">
        <text class="description-text">{{ detail.description || defaultDescription }}</text>
      </view>

      <!-- 底部按钮 -->
      <view class="bottom-button" @click="handleBooking">
        <text class="button-text">{{ type === 'schedule' ? 'View Schedule' : 'Book Now' }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'TravelDetailPage',
  data() {
    return {
      id: null,
      type: 'place',
      detail: {},
      isSaved: false,
      defaultDescription: "Have you ever been on holiday to the Greek Islands before? There's a good chance you may have come across Santorini before."
    }
  },
  onLoad(options) {
    this.id = options.id
    this.type = options.type || 'place'
    this.loadDetail()
  },
  methods: {
    loadDetail() {
      // 这里应该从服务器加载数据
      // 目前使用模拟数据
      if (this.type === 'place') {
        this.detail = {
          id: this.id,
          image: '/static/images/santorini-large.jpg',
          name: 'Santorini Island',
          price: '$850',
          location: 'Greece',
          duration: '5 Days',
          previewImages: [
            '/static/images/preview-1.jpg',
            '/static/images/preview-2.jpg'
          ]
        }
      } else {
        this.detail = {
          id: this.id,
          image: '/static/images/mount-albrus.jpg',
          title: 'Mount Albrus',
          location: 'Italy',
          duration: '3 Days',
          status: 'Upcoming',
          date: 'May 15-20, 2024'
        }
      }
    },
    handleBack() {
      uni.navigateBack({
        delta: 1,
        success: () => {
          console.log('Successfully navigated back')
        },
        fail: (err) => {
          console.error('Navigation back failed:', err)
          uni.showToast({
            title: '返回失败',
            icon: 'none'
          })
        }
      })
    },
    handleSave() {
      this.isSaved = !this.isSaved
      // 这里应该调用保存接口
    },
    handleBooking() {
      if (this.type === 'schedule') {
        uni.switchTab({
          url: '/pages/schedule/TravelSchedulePage',
          success: () => {
            console.log('Successfully switched to schedule tab')
          },
          fail: (err) => {
            console.error('Tab switch failed:', err)
            uni.showToast({
              title: '页面切换失败',
              icon: 'none'
            })
          }
        })
      } else {
        uni.showToast({
          title: 'Booking feature coming soon',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style>
.travel-detail {
  position: relative;
  min-height: 100vh;
  background: #FFFFFF;
}

.header-image-container {
  position: relative;
  width: 100%;
  height: 400px;
}

.header-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 30%);
}

.nav-buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  padding-top: 44px; /* 增加顶部安全距离 */
}

.nav-button {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.nav-button:active {
  transform: scale(0.95);
  background: rgba(255, 255, 255, 0.8);
}

.nav-icon {
  width: 20px;
  height: 20px;
}

/* 特别为返回按钮添加样式 */
.nav-button:first-child {
  margin-left: 16px;
  position: relative;
  z-index: 10;
}

.nav-button:first-child::after {
  content: '返回';
  position: absolute;
  left: 48px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.image-preview {
  align-self: flex-end;
}

.preview-dots {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border-radius: 20px;
  padding: 8px;
}

.preview-dot {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
}

.preview-dot.active {
  border: 2px solid #24C690;
}

.preview-count {
  font-size: 13px;
  color: #000000;
  font-weight: 600;
}

.content-container {
  position: relative;
  margin-top: -24px;
  background: #FFFFFF;
  border-radius: 24px 24px 0 0;
  padding: 24px 20px;
  min-height: 60vh;
}

.title-section {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.title {
  font-size: 24px;
  font-weight: 600;
  color: #000000;
}

.price-container {
  background: #F0F0F0;
  border-radius: 16px;
  padding: 8px 16px;
}

.price {
  font-size: 15px;
  font-weight: 600;
  color: #000000;
}

.price-unit {
  font-size: 13px;
  color: #89807A;
}

.overview-section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 15px;
  font-weight: 600;
  color: #24C690;
  margin-bottom: 16px;
}

.overview-items {
  display: flex;
  flex-direction: row;
  gap: 24px;
}

.overview-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.overview-icon {
  width: 24px;
  height: 24px;
}

.overview-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-label {
  font-size: 11px;
  color: #89807A;
  font-weight: 600;
}

.info-value {
  font-size: 13px;
  color: #000000;
  font-weight: 600;
}

.description-section {
  margin-bottom: 32px;
}

.description-text {
  font-size: 15px;
  line-height: 1.5;
  color: #89807A;
}

.bottom-button {
  background: #24C690;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-text {
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
}
</style> 